<template>
  <div class="theme-selector">
    <!-- 主题设置触发按钮 -->
    <div class="theme-trigger" @click="drawerVisible = true" title="主题设置">
      <el-icon><Setting /></el-icon>
    </div>

    <!-- 主题设置抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      title="主题设置"
      direction="rtl"
      size="350px"
      :show-close="false"
    >
      <!-- 主题选择 -->
      <div class="setting-section">
        <h3 class="section-title">
          <el-icon><Brush /></el-icon>
          主题风格
        </h3>
        <div class="theme-icons">
          <ThemeIcon
            v-for="(theme, key) in themeConfig"
            :key="key"
            :name="String(key)"
            v-model:active="currentTheme"
            :tip="theme.name"
            :header="theme.header.background"
            :menu="theme.menu.background"
            :main="theme.background.page"
            :active-color="theme.text.primary"
          />
        </div>
      </div>

      <!-- 主题色选择 -->
      <div class="setting-section">
        <h3 class="section-title">
          <el-icon><Brush /></el-icon>
          主题色彩
        </h3>
        <div class="color-pickers">
          <ColorPicker
            v-for="colorItem in presetColors"
            :key="colorItem.color"
            :color="colorItem.color"
            :active="currentPrimaryColor"
            @update:active="currentPrimaryColor = $event"
            :tip="colorItem.name"
          />
        </div>

        <!-- 自定义颜色 -->
        <div class="custom-color">
          <el-color-picker
            v-model="currentPrimaryColor"
            show-alpha
            :predefine="predefineColors"
            @change="handleColorChange"
          />
          <span class="custom-color-label">自定义颜色</span>
        </div>
      </div>

      <!-- 其他设置 -->
      <div class="setting-section">
        <h3 class="section-title">
          <el-icon><Tools /></el-icon>
          界面设置
        </h3>
        <div class="setting-options">
          <div class="setting-item">
            <span>紧凑模式</span>
            <el-switch
              v-model="compactMode"
              @change="handleCompactModeChange"
            />
          </div>
          <div class="setting-item">
            <span>固定头部</span>
            <el-switch
              v-model="fixedHeader"
              @change="handleFixedHeaderChange"
            />
          </div>
          <div class="setting-item">
            <span>显示面包屑</span>
            <el-switch
              v-model="showBreadcrumb"
              @change="handleBreadcrumbChange"
            />
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="setting-actions">
        <el-button type="primary" @click="handleReset">
          <el-icon><Refresh /></el-icon>
          重置设置
        </el-button>
        <el-button @click="handleCopyConfig">
          <el-icon><CopyDocument /></el-icon>
          复制配置
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  Setting,
  Brush,
  Tools,
  Refresh,
  CopyDocument,
} from "@element-plus/icons-vue";
import { useAppStore } from "@/stores/app";
import { themeConfig, presetColors, applyTheme } from "@/theme";
import ThemeIcon from "./ThemeIcon.vue";
import ColorPicker from "./ColorPicker.vue";

// 状态管理
const appStore = useAppStore();

// 响应式状态
const drawerVisible = ref(false);
const currentTheme = ref("default");
const currentPrimaryColor = ref("#409EFF");
const compactMode = ref(false);
const fixedHeader = ref(true);
const showBreadcrumb = ref(true);

// 预定义颜色
const predefineColors = presetColors.map((item) => item.color);

// 监听主题变化
watch(currentTheme, (newTheme) => {
  applyTheme(newTheme, currentPrimaryColor.value);
  appStore.setTheme(newTheme);
});

// 监听主题色变化
watch(currentPrimaryColor, (newColor) => {
  applyTheme(currentTheme.value, newColor);
  appStore.setPrimaryColor(newColor);
});

// 处理颜色变化
const handleColorChange = (color: string | null) => {
  if (color) {
    currentPrimaryColor.value = color;
  }
};

// 处理紧凑模式
const handleCompactModeChange = (value: boolean) => {
  document.documentElement.style.setProperty(
    "--el-component-size",
    value ? "small" : "default"
  );
  appStore.setCompactMode(value);
};

// 处理固定头部
const handleFixedHeaderChange = (value: boolean) => {
  document.body.classList.toggle("fixed-header", value);
  appStore.setFixedHeader(value);
};

// 处理面包屑显示
const handleBreadcrumbChange = (value: boolean) => {
  appStore.setShowBreadcrumb(value);
};

// 重置设置
const handleReset = () => {
  currentTheme.value = "default";
  currentPrimaryColor.value = "#409EFF";
  compactMode.value = false;
  fixedHeader.value = true;
  showBreadcrumb.value = true;

  // 重置DOM状态
  document.documentElement.style.removeProperty("--el-component-size");
  document.body.classList.add("fixed-header");

  // 重置存储状态
  appStore.resetTheme();

  ElMessage.success("主题设置已重置");
};

// 复制配置
const handleCopyConfig = async () => {
  const config = {
    theme: currentTheme.value,
    primaryColor: currentPrimaryColor.value,
    compactMode: compactMode.value,
    fixedHeader: fixedHeader.value,
    showBreadcrumb: showBreadcrumb.value,
  };

  try {
    await navigator.clipboard.writeText(JSON.stringify(config, null, 2));
    ElMessage.success("配置已复制到剪贴板");
  } catch {
    ElMessage.error("复制失败，请手动复制");
    console.log("主题配置:", config);
  }
};

// 初始化
onMounted(() => {
  // 从存储中恢复设置
  const savedTheme = appStore.theme;
  const savedPrimaryColor = appStore.primaryColor;
  const savedCompactMode = appStore.compactMode;
  const savedFixedHeader = appStore.fixedHeader;
  const savedShowBreadcrumb = appStore.showBreadcrumb;

  if (savedTheme) {
    currentTheme.value = savedTheme;
  }

  if (savedPrimaryColor) {
    currentPrimaryColor.value = savedPrimaryColor;
  }

  compactMode.value = savedCompactMode;
  fixedHeader.value = savedFixedHeader;
  showBreadcrumb.value = savedShowBreadcrumb;

  // 应用保存的设置
  applyTheme(currentTheme.value, currentPrimaryColor.value);

  if (savedCompactMode) {
    handleCompactModeChange(savedCompactMode);
  }

  if (savedFixedHeader) {
    handleFixedHeaderChange(savedFixedHeader);
  }
});
</script>

<style lang="scss" scoped>
.theme-selector {
  position: relative;
}

.theme-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  color: var(--el-text-color-regular);
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: var(--el-fill-color-light);
    color: var(--el-color-primary);
    border-color: var(--el-color-primary-light-7);
    transform: translateY(-1px);
  }

  .el-icon {
    font-size: 18px;
  }
}

:deep(.el-drawer__header) {
  padding: 20px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--el-border-color-lighter);

  .el-drawer__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

:deep(.el-drawer__body) {
  padding: 0;
}

.setting-section {
  padding: 24px 20px;
  border-bottom: 1px solid var(--el-border-color-lighter);

  &:last-child {
    border-bottom: none;
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);

  .el-icon {
    color: var(--el-color-primary);
  }
}

.theme-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.custom-color {
  display: flex;
  align-items: center;
  gap: 12px;

  .custom-color-label {
    color: var(--el-text-color-regular);
    font-size: 14px;
  }
}

.setting-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    color: var(--el-text-color-regular);
    font-size: 14px;
  }
}

.setting-actions {
  padding: 24px 20px;
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--el-border-color-lighter);
  background: var(--el-fill-color-lighter);

  .el-button {
    flex: 1;
  }
}
</style>